.chat-bubble {
  --background: #fff;
  --arrow-size: 8px;
  --content-padding: 8px 12px;
  position: relative;
  display: inline-block;
}

.bubble-arrow {
  position: absolute;
  color: var(--background);
  display: block;
  height: var(--arrow-size);
  width: var(--arrow-size);
  overflow: visible;
}

.bubble-arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: var(--arrow-size);
  width: 15px;
  transform: translate(-50%, -50%) rotate(var(--arrow-icon-rotate))
}

.bubble-inner {
  background-color: var(--background);
  background-clip: padding-box;
  border-radius: 8px;
  // box-shadow: 0 0 30px 0 rgba(51, 51, 51, .2);
  font-size: 15px;
}

.bubble-inner-content {
  padding: var(--content-padding);
  word-break: break-all;
}
